<template>
  <div>
    <div class='head'>
      <el-form inline label-width='120px' size='mini'>
        <el-form-item>
          <el-input placeholder='请输入分类名称' v-model='searchData.name' @keyup.enter.native='search' style='width: 200px'>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' icon='el-icon-search' @click='search'>搜索</el-button>
          <el-button icon='el-icon-refresh' type='danger' @click='clearForm'>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style='margin-bottom: 10px;'>
      <el-button size='mini' type='primary' icon='el-icon-refresh' @click='refreshCache'>刷新缓存</el-button>
    </div>
    <div class='table-goodscategory'>
      <el-table :data='treeData' row-key='id' border ref='refTable' v-loading='loading'
        :tree-props='{ children: "children", hasChildren: "hasChildren" }'>
        <el-table-column prop='id' label='分类ID' align='center' width='100px'>
          <template slot-scope='scope'>
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop='parentId' label='父级ID' align='center' width='100px'>
          <template slot-scope='scope'>
            <span>{{ scope.row.parentId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop='name' label='分类名称' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.name | stringTrim }}</span>
          </template>
        </el-table-column>
        <el-table-column prop='sort' label='分类排序' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column prop='level' label='分类层级' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.level }}</span>
          </template>
        </el-table-column>
        <el-table-column label='操作' align='center'>
          <template slot-scope='scope'>
            <el-button size='mini' type='success' @click='openAddDialog(scope.row)'>
              <i class="el-icon-plus">添加</i>
            </el-button>
            <el-button size='mini' type='warning' @click='openUpdateDialog(scope.row)'>
              <i class="el-icon-edit">编辑</i>
            </el-button>
            <el-button size='mini' type='danger' @click='del(scope.row.id)'>
              <i class="el-icon-delete">删除</i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title='title' :visible.sync='addDialogVisible' width='500px' center>
        <el-form :model='form' :rules='rules' ref='form' size='mini'>
          <el-form-item label='父级分类' label-width='80px' v-if='title === "新增分类"'>
            <el-input placeholder='父级分类名称' v-model='choiceNode.name' disabled />
          </el-form-item>
          <el-form-item label='分类名称' label-width='80px' prop='name'>
            <el-input placeholder='请输入分类名称' v-model='form.name'></el-input>
          </el-form-item>
          <el-form-item label='分类排序' prop='sort' label-width='80px'>
            <el-input placeholder='请输入分类排序' v-model.number='form.sort' />
          </el-form-item>
          <el-form-item label='分类层级' prop='level' label-width='80px'>
            <el-input placeholder='请输入分类层级' v-model.number='form.level' />
          </el-form-item>
        </el-form>
        <span slot='footer' class='dialog-footer'>
          <el-button size='mini' type='primary' @click='save'>确 定</el-button>
          <el-button size='mini' @click='cacleDialog'>取 消</el-button>
        </span>
      </el-dialog>

    </div>
  </div>

</template>
<script>
import {
  goods_category_list,
  goods_category_add,
  goods_category_update,
  goods_category_del,
  goods_category_detail,
  goods_category_refresh
} from '@/api/goodscategory';

export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      choiceNode: {
        id: 0,
        name: '-'
      },
      addDialogVisible: false,
      form: {
        name: '',
        level: 0,
        sort: 0,
      },
      searchData: {
        name: '',
        id: ''
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        level: [{ required: true, message: '请输入层级', trigger: 'blur' }],
        sort: [{ required: true, type: 'number', message: '请输入排序', trigger: 'blur' }]
      },
      loading: false,
      expand: false,
      title: '新增分类'
    };
  },
  created() {
    this.getData();
  },
  methods: {
    del(id) {
      this.$confirm('是否删除该分类?', '操作提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await goods_category_del(id)
        this.$message.success(res);
        this.getData();
      })
    },
    search() {
      this.getData();
    },
    cacleDialog() {
      this.addDialogVisible = false;
    },
    async submit() {
      const validate = await this.$refs['form'].validate
      if (!validate) {
        return
      }
      this.loading = true;
      let res;
      if (this.title === '新增分类') {
        this.form.parentId = this.choiceNode.id;
        res = await goodscategory_add(this.form);
      }
      if (this.title === '编辑分类') {
        res = await goodscategory_update(this.choiceNode.id, this.form);
      }
      this.$message.success(res);
      this.getData();
      this.loading = false;
    },
    async getData() {
      this.loading = true;
      const res = await goods_category_list({ name: this.searchData.name });
      this.treeData = res;
      this.loading = false;
    },
    clearForm() {
      this.searchData = {};
      this.getData();
    },
    //打开新增弹窗
    openAddDialog(row) {
      this.title = '新增分类';
      this.resetForm();
      this.choiceNode.name = row.name;
      this.addDialogVisible = true;
      this.choiceNode.id = row.id;
    },
    //打开编辑弹窗
    async openUpdateDialog(row) {
      this.title = '编辑分类';
      this.addDialogVisible = true;
      const res = await goods_category_detail(row.id)
      this.form = res;
    },
    async save() {
      const validate = await this.$refs['form'].validate
      if (!validate) {
        return
      }
      this.loading = true;
      let res;
      if (this.title === '新增分类') {
        this.form.parentId = this.choiceNode.id;
        res = await goods_category_add(this.form);
      }
      if (this.title === '编辑分类') {
        res = await goods_category_update(this.form);
      }
      this.$message.success(res);
      this.addDialogVisible = false;
      this.getData();
      this.loading = false;
    },
    resetForm() {
      this.form = {
        name: '',
        sort: 0,
        level: 0
      };
    },
    async refreshCache() {
      const res = await goods_category_refresh()
      this.$message.success(res)
    }
  }
};
</script>
<style lang='less'>
.container::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>